<template>
  <div style="height:100%;">
    <el-container style="height:100%">
      <el-header>
        <img src="../assets/images/logo-company.png" alt="" style="height:40px;">
        <img src="../assets/images/logo-system.png" alt="" style="height:40px;margin-left: 30px;">
        <div class="info-block">
          <span @click="doLogout">
                  <i class="fa fa-power-off fa-fw"></i><span>退出登录</span>
          </span>
        </div>
      </el-header>
      <el-container>
        <!-- <el-aside width="200px"> -->
        <el-menu :collapse="isCollapse" default-active="2" class="el-menu-vertical-demo" background-color="#195ca3" text-color="#fff" active-text-color="#2196f3" :style="isCollapse?'width:0px;display:none;':'min-width:200px;'">
          <div class="personalInfo">
            <div class="infoimg"><img :src="imgUrl" height="90" width="90" @click="showEditDilog">
               <edit-photo :show.sync="isShowEditDilog" @refreshEdit="showPhoto" :username="name" :userObject="userObject"></edit-photo>
               </div>
            <span>欢迎您：{{name}}</span>
          </div>
          <div v-for="item in navbarList[headerNavbarActiveIndex]['sub']" :key="item.name">
            <el-submenu :index="item['name']" v-if="item['hasSub']" style="border-bottom:solid 1px #164f99;">
              <template slot="title">
                        <span>{{item['name']}}</span>
</template>
                <div style="border-top:solid 1px #19479a;">
                  <router-link :to="subItem['path']==undefined?'/main/abstract':subItem['path']" v-for="subItem in item['sub']" :key="subItem['name']">
                    <el-menu-item :index="subItem['name']">{{subItem['name']}}</el-menu-item>
                  </router-link>
                </div>
              </el-submenu>
              <router-link :to="item['path']==undefined?'/main/abstract':item['path']" v-if="!item['hasSub']">
                <el-menu-item :index="item['name']" class="custom-el-menu-item" style="border-bottom:solid 1px #164f99;">
                  <span slot="title">{{item['name']}}</span>
                </el-menu-item>
              </router-link>
            </div>
          </el-menu>
        <!-- </el-aside> -->
        <el-container id="container">
          <el-menu style="height:38px;" :default-active="headerNavbarActiveIndex" class="el-menu-demo" mode="horizontal" background-color="#12457c"
            text-color="#fff" active-text-color="#fff" @select="changeHeaderNavbarIndex">
            <el-menu-item @click="isCollapse=false" v-for="(item,index) in navbarList" :key="item.index" class="header-navbar-item" :index='index.toString()'>
              <font></font><span>{{item.name}}</span><font></font>
            </el-menu-item>
          </el-menu>
          <div class="topShortcutBar">
            <jt-tag-view @update="isCollapse=!isCollapse" @initHeaderNavbarActiveIndex = "initHeaderNavbarActiveIndex" </jt-tag-view>
            <jt-breadcrumb></jt-breadcrumb>
          </div>

          <el-main>
            <span class="max-min" :class="isCollapse? 'iconfont icon-xiangyou1': 'iconfont icon-xiangzuo1'" @click="isCollapse=!isCollapse"></span>
            <div class="shortcut-bar" style="z-index: 999;position: absolute;right: 0;height:300px;display:flex;z-index:999999">
              <div @click="collapseShortcutBar" style="display: table-cell;vertical-align: middle;text-align: center;width:18px;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);margin: 0 auto auto;padding: 8px 10px;border: 1px solid #ebeef5;background-color: white;cursor:pointer;">
                <!-- <i class="el-icon-more"></i> -->
                快捷操作栏
              </div>
              <div v-if="isShortcutBarCollapse" style="box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);background-color:white;width:200px;height:300px;border: 1px solid #ebeef5;padding:30px;">
                <el-button>1</el-button>
              </div>
            </div>
            <transition name="fade" mode="out-in">
              <keep-alive :include="cachedViews">
                <router-view></router-view>
              </keep-alive>
            </transition>
          </el-main>
          <el-footer  :style="isCollapse?'width:100%':'width: calc(100% - 200px);'" height="40px">上海骏诺信息科技有限公司技术支持<span style="margin-left:30px;">(版本：{{version}})</span></el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import {
    getNavbarListService
  } from '../service/permission/navbar';
  import {
    logoutService
  } from '../service/auth';
  import {
    getUserInfo
  } from '../service/task';
  import JtBreadcrumb from '../components/jt-breadcrumb/index';
  import JtTagView from '../components/jt-tag-view/index';
  import EditPhoto from './dialog/common/edit-photo';
  import {
    systemVersion
  } from '../service/constant'
  export default {
    name: 'MainFrame',
    data() {
      return {
        imgUrl: "/static/img/test-gravatar.cf8a5bb.png",
        isCollapse: true,
        version: systemVersion,
        isShortcutBarCollapse: false,
        headerNavbarActiveIndex: '0',
        navbarList: [{}],
        name: localStorage.getItem('username'),
        permissionList: [],
        isShowEditDilog: false,
        userObject: JSON.parse(localStorage.getItem('currentUser'))
      };
    },
    components: {
      'jt-breadcrumb': JtBreadcrumb,
      'jt-tag-view': JtTagView,
      'edit-photo': EditPhoto,
    },
    methods: {
      showEditDilog() {
        this.isShowEditDilog = true;
      },
      showPhoto(gobackList) {
       this.imgUrl = `${process.env.API_URL}user/downloadAttach?filePath=${gobackList[0]['filePath']}&fileName=${gobackList[0]['fileName']}`;
      },
      initHeaderNavbarActiveIndex() {
        this.headerNavbarActiveIndex = 0;
      },
      collapseShortcutBar() {
        this.isShortcutBarCollapse = !this.isShortcutBarCollapse;
      },
      changeHeaderNavbarIndex(index) {
        this.headerNavbarActiveIndex = index;
      },
      jumpToIndex() {
        this.$router.push({
          path: '/main/abstract'
        });
      },
      doLogout() {
        this.$store.state.tagsView.visitedViews = [];
        localStorage.removeItem("token");
        localStorage.removeItem("username");
        localStorage.removeItem("currentUser");
        this.$router.push({
          path: '/'
        });
        // logoutService(localStorage.getItem('username'))
        //   .then(() => {
        //     localStorage.clear();
        //     this.$router.push({
        //       path: '/'
        //     });
        //   })
      },
      canDo(url) {
        if(url=='/main/home/backlog'){
          return true;
        }
        for (let i = 0; i < this.permissionList.length; i++) {
          if (this.permissionList[i].path == url) {
            return true;
          }
        }
        return false;
      },
      filterNavbar(navList) {
        let rs = [];
        for (let i = 0; i < navList.length; i++) {
          let nav = navList[i];
          if (nav.sub) {
            nav.sub = this.filterNavbar(nav.sub);
            if (nav.sub.length > 0) {
              rs.push(nav);
            }
          } else {
            if (this.canDo(nav.path)) {
              rs.push(nav);
            }
          }
        }
        return rs;
      }

    },
    created() {
      let that = this;
      let navList = getNavbarListService();
      if(`${process.env.API_URL}user/downloadAttach?filePath=${JSON.parse(localStorage.getItem('currentUser'))['avatar']}&fileName=${JSON.parse(localStorage.getItem('currentUser'))['avatarName']}`.split("fileName=")[1] != "null") {
         this.imgUrl = `${process.env.API_URL}user/downloadAttach?filePath=${JSON.parse(localStorage.getItem('currentUser'))['avatar']}&fileName=${JSON.parse(localStorage.getItem('currentUser'))['avatarName']}`;
      }
      //this.navbarList = getNavbarListService();
      getUserInfo().then(res => {
        if(res.data.result.type==1){
          that.navbarList=navList;
        }else{
          that.permissionList = res.data.result.permissions;
          let rs = that.filterNavbar(navList);
          if (rs.length > 0) {
            that.navbarList = rs;
          } else {
            that.navbarList = [{}];
          }
        }

        if(res.data.result.roles){
            let roleNames=[];
            res.data.result.roles.forEach(e => {
                roleNames.push(e.name);
            });
            localStorage.setItem('__USER_ROLE',roleNames.join(','));
        }

        console.log(that.navbarList);
      });

      //this.navbarList = getNavbarListService();
    },
    mounted() {

    },
    computed: {
      cachedViews() {
        return this.$store.state.tagsView.cachedViews
      }
    }
  }
</script>
